<template>
	<transition name="el-fade-in">
		<div class="payBox">
			<div class="payBoxTop">
				<div class="payBoxTopTime">{{payBoxTime}}S</div>
				<div class="payBoxTopClose el-icon-close" @click="closePay">
				</div>
			</div>
			<div class="itemIitle huiHei">请扫描<span class="zfbBule">微信</span>二维码支付</div>
			<div class="flex">
				<div class="itemIitle hui ">支付金额：<span class="red">￥{{totalFee?totalFee:''}}</span></div>
			</div>
			<div class="qrcode" ref="wxQrCodeUrl"></div>
		</div>

		<!-- 		<div class="mzjfPayBox" v-if="code == 'mzjf'">
			<div class="mzjfPayBoxTop">
				<div class="mzjfPayBoxTopTime">{{payBoxTime}}S</div>
				<div class="mzjfPayBoxTopClose el-icon-close" @click="closePay">
				</div>
			</div>
			<div class="mzjfItemIitle huiHei mzjfImgeLeft ">医保支付金额：<span class="red">￥0.00</span></div>
			<div class="mzjfItemIitle hui ">(结算后直接从医保卡扣除)</div>

			<div class="flex spaceBetweenFlex">
				<div class="mzjfImgeLeft">
					<div class="mzjfItemIitle huiHei">请扫描<span class="zfbBule">微信</span>二维码支付</div>
					<div class="mzjfItemIitle hui ">个人支付金额：<span class="red">￥{{totalFee?totalFee:''}}</span></div>
				</div>
				<div class="qrcode" ref="wxQrCodeUrl"></div>
			</div>
		</div> -->
	</transition>
</template>
<script>
	import {
		searchPayStatus
	} from "@api/apiBox/pay"

	import {
		unlockReg
	} from "@api/apiBox/mzyyAndMzgh"
	import {
		MessageBox
	} from "element-ui";

	import QRCode from 'qrcodejs2'
	var canvas = "";
	export default {
		name: "Wx",
		props: [
			'payWxBoxIsSHow',
			'wxSrc',
			'code',
			'totalFee'
		],
		components: {},
		data() {
			return {
				//支付框倒计时
				payBoxTime: 60,
				timer: '', //定时器
				status: '',
				payChannel: 1, //订单支付平台 1.微信 2.支付宝 3.银行卡
				isEndPay: false //是否终止支付
			}
		},
		methods: {
			closePay() {
				let _this = this;
				_this.$confirm('正在支付中，如果关闭可能造成扣费，是否确认关闭？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					_this.isEndPay = true;
					clearInterval(_this.timer)
					_this.goBackHome();
					_this.$emit("hidWx", 1)
				}).catch(() => {});
			},
			creatWxQrCode() {
				let _this = this;
				var qrcode = new QRCode(this.$refs.wxQrCodeUrl, {
					text: _this.wxSrc, // 需要转换为二维码的内容
					width: 150,
					height: 150,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: QRCode.CorrectLevel.H
				})
			},
			startPay() {
				this.isEndPay = false;
				this.searchPayStatusEvent();
			},
			async searchPayStatusEvent() {
				let _this = this;
				await _this.sleepTime(1000);
				//查询订单状态
				let stausData = {
					data: {
						orderId: _this.$store.state.recipel.erCodeInfo.orderId,
						isCallback: 0 // 1-自动通知HIS支付结果 0-不自动通知HIS支付结果 自助机传0  H5传1
					}
				};
				const result = await searchPayStatus(stausData).catch((e) => {
					//获取支付状态报错 500 调用his接口 仅限预约挂号
					// _this.unlockRegMethod();
					// 失败重新查询状态
					_this.searchPayStatusEvent();
				});
				let res = result.data.status;
				console.log(result, '!!') //1 生成订单未支付 2 成功 3 失败 4 已退费
				//成功payOrderId
				if (res == 2) {
					if (_this.code == 'mzyy' || _this.code == "mzgh") {
						result.data.payWay = '微信支付';
						console.log(result.data, 'result');
						this.$store.dispatch("payrecord/updatepayinfo", result.data);
					} else if (_this.code == 'mzjf' || _this.code == "yjjcz") {
						this.$store.dispatch("recipel/updateBillInfo", result.data);
						let payinfo = {
							payWay: '微信支付',
							rcptNo: '111',
							orderId: _this.$store.state.recipel.erCodeInfo.payOrderId
						}
						this.$store.dispatch("payrecord/updatepayinfo", payinfo);
					}
					clearInterval(_this.timer)
					setTimeout(() => {
						_this.$emit("payRes", 'success');
					}, 3000);
					// _this.$emit("payRes", 'success');
				}
				//失败
				if (res == 3) {
					clearInterval(_this.timer)
					_this.$emit("payRes", 'fail');
				}
				//还没有支付
				if (res == 1) {
					console.log('还没有支付!', _this.payWxBoxIsSHow);
					if (!_this.isEndPay) {
						setTimeout(() => _this.searchPayStatusEvent(), 3000);
					} else {
						clearInterval(_this.timer)
					}
				}
			},
			//延时
			async sleepTime(timeountMS) {
				return new Promise((resolve) => {
					setTimeout(resolve, timeountMS);
				});
			},
			async unlockRegMethod() {
				if (this.code == 'mzyy' || this.code == "mzgh") {
					let unlockRegData = {
						data: {
							regId: this.$store.state.appointment.appointmentInfo.regId,
							queueNo: this.$store.state.appointment.appointmentInfo.queueNo,
							regDate: this.$store.state.appointment.date //预约日期
						},
						that: this
					}
				}
				const unlockRegMethodRes = await unlockReg(unlockRegData);
				console.log('解锁号源成功！')
			},
		},
		created() {
			this.payBoxTime = 60;
			let _this = this;
			clearInterval(_this.myVar);
			_this.myVar = window.setInterval(() => {
				let dataTime = _this.payBoxTime;
				if (dataTime >= 1) {
					dataTime -= 1;
				}
				_this.payBoxTime = dataTime;
			}, 1000);
		},
		mounted() {
			this.creatWxQrCode()
		},
		computed: {},
		watch: {},
		//关闭页面的时候 关闭定时器
		beforeDestroy: function() {
			clearInterval(this.timer)
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/xzzffs.scss";
	@import "../../assets/css/mzjf/mzjfPay.scss";
</style>
